<link type="text/css" rel="stylesheet" href="/styles/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="/styles/jsgrid-theme.min.css" />
<script type="text/javascript" src="/js/jsgrid.min.js"></script>
<div id="jsGrid"></div>
<script>
  $('#search-box').keyup(function(e){
      if (e.keyCode == 13) {
          var q = $('#search-box').val();
          $.get('/api/search/?q='+q, function (call) {
            var products = call;
            console.log(call);
            $("#jsGrid").jsGrid({
              width: "100%",
              height: "800px",

              inserting: false,
              editing: false,
              sorting: false,
              paging: true,
              selecting: true,
              filtering: false,
              data: products,

              fields: [
                {
                  headerTemplate: function() {
                    return $("<button>").attr("type", "button").text("聚合")
                      .on("click", function () {
                        groupSelectedItems();
                      });
                  },
                  itemTemplate: function(_, item) {
                    return $("<input>").attr("type", "checkbox")
                      .prop("checked", $.inArray(item, selectedItems) > -1)
                      .on("change", function () {
                        $(this).is(":checked") ? selectItem(item) : unselectItem(item);
                      });
                  },
                  align: "center",
                  width: 50
                },
                { name: "brand", type: "text", width: 150, validate: "required" },
                { name: "brief_name", type: "text", width: 150 },
                { name: "category", type: "text", width: 150 },
                { name: "sn", type: "text", width: 100 },
                { name: "model", type: "text",width: 100 },
                { name: "pinyin", type: "text", width: 100},
                { name: "msrp", type: "text", width: 100},
                { name: "version", type: "text", width: 50}
              ],

              controllers: {
                loadData: function(filter) {

                }
              },
            });
            var selectedItems = [];

            var selectItem = function(item) {
              selectedItems.push(item);
            };

            var unselectItem = function(item) {
              selectedItems = $.grep(selectedItems, function(i) {
                return i !== item;
              });
            };

            var groupSelectedItems = function() {
              if(!selectedItems.length || !confirm("确认聚合这些产品?"))
                return;
              console.log('selected items:',selectedItems);
              groupSelectedItemsFromDb(selectedItems);

              var $grid = $("#jsGrid");
              $grid.jsGrid("option", "pageIndex", 1);
              $grid.jsGrid("loadData");

              selectedItems = [];
            };

            var groupSelectedItemsFromDb = function(selectedItems) {
//              db.clients = $.map(db.clients, function(client) {
//                return ($.inArray(client, deletingClients) > -1) ? null : client;
//              });
              var attr = prompt('输入聚类属性:');
              console.log(attr);
              var child_sn = [];
              for (var i=0; i<selectedItems.length; i++) {
                  child_sn.push(selectedItems[i].sn);
              }
              var reqBody = {
                  parent_sn: selectedItems[0].sn,
                  parent_info: JSON.stringify(selectedItems[0]),
                  child_sn: JSON.stringify(child_sn),
                  attribute: attr,
                  keyword: q,
                  parent_id: 1,
              }
              console.log('reqbody:',reqBody);
              $.post('/api/product/classify/', reqBody, function (err, call) {
                console.log(call);
              })
            };
          })
      }
  })
</script>


